<template>
  <div class="seamless-warp">
    <vue-seamless-scroll
      :data="listData"
      :class-option="classOption"
      class="warp"
    >
      <ul class="item">
        <li v-for="(item, index) in listData" :key="index">
          <span class="title" v-text="item.title" />
          <span class="date" v-text="item.date" />
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'Example04Basic',
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      listData: [],
      classOption: {
        singleHeight: 30
      }
    }
  },
  created() {
    setTimeout(() => {
      const list = [
        {
          title: '无缝滚动第一行无缝滚动第一行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第二行无缝滚动第二行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第三行无缝滚动第三行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第四行无缝滚动第四行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第五行无缝滚动第五行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第六行无缝滚动第六行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第七行无缝滚动第七行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第八行无缝滚动第八行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第九行无缝滚动第九行',
          date: '2017-12-16'
        }
      ]
      this.listData = list
    }, 1000)
  }
}
</script>

<style scoped lang="less">
  .warp {
    height: 270px;
    width: 360px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li,a {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
       }
    }
  }
  .card{
    width: 223px;
    height: 131px;
    background-color: #f5bd19;
    box-shadow: 0 0 0 2px #3a8ee6 inset;
    box-sizing: border-box;
    background-size: 223px 131px;
    /*clip-path: url('../../../assets/img/border.svg#c1');*/
    clip-path: polygon(0 12px,12px 0,calc(100% - 8px ) 0, 100% 8px,100% calc(100% - 12px ),calc(100% - 12px ) 100%,8px 100%,0 calc(100% - 8px ))
  }
</style>
